<template>
  <div class="i-box" hint="岁月计算">
    <nav-bar class="i-nav" hint="导航栏">
      <div slot="middle">岁月计算</div>
      <img class="top-back-icon" src="@res/img/common_back.png" alt="" slot="left" @click="back">
    </nav-bar>

    <input-item>
      <p class="i-input" slot="name">输入您的出生日期:</p>
      <div class="i-input" slot="input" @click="showPicker">{{birthStr}}</div>
    </input-item>

    <div class="i-content" hint="结果区域">
      <div style="font-size: 1.4rem;margin-bottom: .8rem">您已经在地球上生活了</div>
      <div class="i-has-live">{{liveDay}}天</div>
      <input-item>
        <p class="i-input" slot="name">年龄</p>
        <div class="i-input" slot="input">{{age}}岁</div>
      </input-item>

      <input-item>
        <p class="i-input" slot="name">农历</p>
        <div class="i-input" slot="input">{{luDay}}</div>
      </input-item>
      <input-item>
        <p class="i-input" slot="name">生肖</p>
        <div class="i-input" slot="input">{{sign}}</div>
      </input-item>
      <input-item>
        <p class="i-input" slot="name">星座</p>
        <div class="i-input" slot="input">{{star}}</div>
      </input-item>
      <input-item>
        <p class="i-input" slot="name">星期</p>
        <div class="i-input" slot="input">{{weekday}}</div>
      </input-item>
      <input-item>
        <p class="i-input" slot="name">天干地支</p>
        <div class="i-input" slot="input">{{skyEarth}}</div>
      </input-item>

      <input-item>
        <p class="i-input" slot="name">距您下次生日还有</p>
        <div class="i-input i-has-live" slot="input">{{difNext}}天</div>
      </input-item>

      <input-item>
        <p class="i-input" slot="name">距您{{tenAge}}岁生日还有</p>
        <div class="i-input i-has-live" slot="input">{{difTen}}天</div>
      </input-item>

    </div>
  </div>
</template>

<script>
  import NavBar from "@/components/common/NavBar";
  import InputItem from "@/components/common/InputItem";
  import SubmitButton from "@/components/common/SubmitButton";
  import {calendar} from "@/common/calendar";

  export default {
    name: "Age",
    data() {
      return {
        test: 0,
        datePicker: null,
        birthYear: 2000,
        birthMonth: 1,
        birthDay: 12,
        liveDay: 0,
        difNext: 0,
        difTen: 0,//下一个整十岁的天数
        tenAge:0,//下一个整十岁
        age: 0,
        sign: '龙',
        star: '天蝎座',
        luDay: '农历日期',
        skyEarth: '天干地支',
        weekday: '星期一',
        showResult: false

      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      showPicker() {
        if (!this.datePicker) {
          this.datePicker = this.$createDatePicker({
            title: '选择出生日期',
            min: new Date(1950, 9, 1),
            max: new Date(2022, 0, 1),
            value: new Date(this.birthYear, this.birthMonth - 1, this.birthDay),
            onSelect: this.selectHandle,
          })
        }
        this.datePicker.show()
      },
      selectHandle(date, selectedVal, selectedText) {
        this.birthYear = selectedVal[0]
        this.birthMonth = selectedVal[1]
        this.birthDay = selectedVal[2]
        this.liveDay = this.timeFn(new Date(selectedVal[0], selectedVal[1] - 1, selectedVal[2]), new Date())
        this.difNext = this.timeFn(new Date(), new Date(new Date().getFullYear() + 1, selectedVal[1] - 1, selectedVal[2]))
        let dif = 0
        if (this.difNext >= 365) {
          dif = 1
          this.difNext = this.timeFn(new Date(), new Date(new Date().getFullYear(), selectedVal[1] - 1, selectedVal[2]))
        }
        let obj = calendar.solar2lunar(selectedVal[0], selectedVal[1], selectedVal[2])
        this.sign = obj.Animal
        this.age = new Date().getFullYear() - this.birthYear +1- dif
        this.star = obj.astro
        this.weekday = obj.ncWeek
        this.luDay = this.birthYear + '年' + obj.IMonthCn + obj.IDayCn
        this.skyEarth = obj.gzYear + '年' + obj.gzMonth + '月' + obj.gzDay + '日'
        this.tenAge = Math.floor(this.age/10)*10+10
        console.log('tenAge',this.age,this.tenAge);
        this.difTen = this.timeFn(new Date(), new Date(this.tenAge+this.birthYear-1, selectedVal[1] - 1, selectedVal[2]))

      },
      timeFn(dateBegin, dateEnd) {//di作为一个变量传进来
//如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
        let dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
        let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
//         let leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
//         let hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
// //计算相差分钟数
//         let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
//         let minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
// //计算相差秒数
//         let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
//         let seconds = Math.round(leave3 / 1000)
        return dayDiff
        // console.log(" 相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
        // console.log(dateDiff + "时间差的毫秒数", dayDiff + "计算出相差天数", leave1 + "计算天数后剩余的毫秒数"
        //   , hours + "计算出小时数", minutes + "计算相差分钟数", seconds + "计算相差秒数");
      }
    },
    components: {
      NavBar,
      InputItem,
    }
    ,
    created() {
      this.$nextTick(()=>{
        this.showPicker()
      })
    }
    ,
    computed: {
      birthStr() {
        return this.birthYear + '年' + this.birthMonth + '月' + this.birthDay + '日'
      }
    }
  }
</script>

<style scoped>
  .i-box {
  }

  .i-input {
    font-size: 1.4rem;
    width: 100%;
  }

  .i-content {
    margin-top: 2rem;
  }
  .i-has-live{
    color: var(--color-high-text);
    padding: 0.5rem 0;
    font-size: 2.4rem;
  }
</style>
